{% extends 'layout/body.html' %}
{% block title %}
    班级管理
{% endblock %}
{% block content %}
    <div class="row mt-2">
        {% raw %}
            <div class="col-6 offset-3" id="app">
                <form method="POST" @submit.prevent="onSubmit">
                    <div class="form-group form-row">
                        <div class="col-4 text-right col-form-label">
                            名称：
                        </div>
                        <div class="col-8">
                            <input required v-model="course.name" style="width: 12em" type="text" name="name"
                                   class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group form-row">
                        <div class="col-4 text-right col-form-label">
                            学时：
                        </div>
                        <div class="col-8">
                            <input required style="width: 12em" type="number" name="hours"
                                   v-model="course.hours"
                                   class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group form-row">
                        <div class="col-8 offset-4">
                            <button class="btn btn-primary"><i class="bi bi-check-square"></i>保存</button>
                        </div>
                    </div>
                </form>
            </div>
        {% endraw %}
    </div>
    <script>
        const {createApp, ref} = Vue;
        createApp({
            methods: {
                onSubmit: function () {
                    // 发起 HTTP 请求
                    axios.post('/course/save', this.course)
                        .then(() => {
                            window.location.href = "/course";
                        })
                        .catch(error => {
                            console.error("请求出错：", error);
                        });
                }
            },
            data() {
                return {
                    course: {
                        name: '',
                        hours: ''
                    }
                }
            },
            mounted() {
                // 发起 HTTP 请求
            }
        }).mount('#app')
    </script>
{% endblock %}
